<template>
  <el-form
    :label-position="labelPosition"
    label-width="100px"
    style="max-width: 480px"
  >
    <el-form-item label="网卡名称:">
     {{netname}}
    </el-form-item>
  
    <el-form-item class="ipinput" label="IP地址:">
      <div v-for="(item, index) in ip">
        <el-input
          v-model="ip[index]"
          @input="(val) => checkVal(val, index)"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          maxlength="3"
        ></el-input>
        <span v-if="index == 0 || index == 1 || index == 2">.</span>
      </div>
    </el-form-item>
    <el-form-item class="ipinput" label="网关地址:">
      <div v-for="(item, index) in gateway">
        <el-input
          v-model="gateway[index]"
          @input="(val) => checkGateway(val, index)"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          maxlength="3"
        ></el-input>
        <span v-if="index == 0 || index == 1 || index == 2">.</span>
      </div>
    </el-form-item>
    <el-form-item label="MAC地址:" class="macinput">
      <div v-for="(item, index) in mac">
        <el-input
          v-model="mac[index]"
          onkeyup="value=value.replace(/[\u4e00-\u9fa5]/g,'')"
          maxlength="2"
        ></el-input>
        <span
          v-if="
            index == 0 || index == 1 || index == 2 || index == 3 || index == 4
          "
          >:</span
        >
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="add">提交</el-button>
      <router-link to='/home/showIp' class="back"><el-button>返回</el-button></router-link>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref, reactive, ToRefs, toRefs } from "vue";
import { networkRequired } from "../../js/alert";
import request from "../../http/request";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
export default {
  setup(props, { emit }) {
    const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    const router = useRoute();
    
    const data = reactive({
      ip: ["", "", "", ""],
      gateway: ["", "", "", ""],
      mac: ["", "", "", "", "", ""],
      netname:router.params.netname
    });

    const checkVal = (val, index) => {
      switch (index) {
        case 0:
          if (val > 255) data.ip[index] = 255;
        case 1:
          if (val > 255) data.ip[index] = 255;
        case 2:
          if (val > 255) data.ip[index] = 255;
        case 3:
          if (val > 255) data.ip[index] = 255;
      }
    };

    const checkGateway = (val, index) => {
      switch (index) {
        case 0:
          if (val > 255) data.gateway[index] = 255;
        case 1:
          if (val > 255) data.gateway[index] = 255;
        case 2:
          if (val > 255) data.gateway[index] = 255;
        case 3:
          if (val > 255) data.gateway[index] = 255;
      }
    };

    const add = async () => {
      const submit = {
        user_id:userInfo.user_id,  
        net_name: router.params.netname,
        ip: data.ip[0] + "." + data.ip[1] + "." + data.ip[2] + "." + data.ip[3],
        gateway:
          data.gateway[0] +
          "." +
          data.gateway[1] +
          "." +
          data.gateway[2] +
          "." +
          data.gateway[3],
        mac:
          data.mac[0] +
          ":" +
          data.mac[1] +
          ":" +
          data.mac[2] +
          ":" +
          data.mac[3] +
          ":" +
          data.mac[4] +
          ":" +
          data.mac[5],
      };

      if (!networkRequired(data)) {
        ElMessage({
          message: "请输入",
          type: "error",
        });
        return;
      }
      if (submit.ip == "...") submit.ip = "";
      if (submit.gateway == "...") submit.gateway = "";
      if (submit.mac == ":::::") submit.mac = "";
    
      const res = await request.updateNetwork(submit);
      if (res) {
        ElMessage({
          message:res.data.message,
          type: "message",
        });
      }
    };
    const labelPosition = ref("left");

    const torefs = toRefs(data);
    return {
      labelPosition,
      checkVal,
      checkGateway,
      ...torefs,
      add,
    };
  },
};
</script>

<style lang='scss' scoped>
.el-form {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 10px;
}
.ipinput {
  .el-input {
    width: 80px;
  }
  span {
    margin: 0 5px;
  }
}
.macinput {
  .el-input {
    width: 40px;
  }
  span {
    margin: 0 5px;
  }
}
.back{
    margin-left: 20px;
    text-decoration: none;
}
</style>